import React, { Component } from 'react'

// state完整版
export class Weather extends Component {
  // 构造器调用几次? ———— 1次
  constructor(props) {
    console.log('constructor')
    super(props)
    // 初始化状态
    this.state = {
      isHot: false,
      wind: '微风'
    }
    // 解决类中this指向问题-方案1-bind
    // 右边的changeWeather来自于原型链上的
    // 左边的来自组件实例上的
    this.myChangeWeather = this.changeWeather.bind(this)
  }

  // render调用几次? ———— 1+n次 1是初始化的那次 n是状态更新的次数
  render() {
    // console.log('Weather组件实例对象:', this)
    console.log('render')

    // 读取状态
    const { isHot, wind } = this.state

    return (
      <div>
        <h1 onClick={this.myChangeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}, {wind}</h1>
      </div>
    )
  }

  // 类方法
  // changeWeather放在哪里? ———— Weather的原型对象上, 供实例使用
  // 通过Weather实例调用changeWeather时, changeWeather中的this就是Weather实例
  changeWeather() {
    // 由于changeWeather是作为onClick的回调, 所以不是通过实例调用的, 是直接调用
    // 类中的方法默认开启了局部的严格模式, 所以changeWeather中的this为undefined
    // console.log(this)

    // 获取原来的isHot值
    const isHot = this.state.isHot
    // 严重注意: 状态必须通过setState进行更新, 且更新是一种合并, 不是替换
    this.setState({
      isHot: !isHot
    })
  }
}

// state简写方式
export class EasyWeather extends Component {
  // 实例属性
  state = {
    isHot: false,
    wind: '微风'
  }

  render() {
    const { isHot, wind } = this.state
    return (
      <div>
        <h2>state 精简模式</h2>
        <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}, {wind}</h1>
      </div>
    )
  }

  // changeWeather变成了实例属性！！
  // 如果直接写函数 则是放在 Weather的原型对象上, 供实例使用
  // 如果不是箭头函数则 this 指向 undefined
  changeWeather = () => {
    // console.log(this) this 指向 实例对象
    const isHot = this.state.isHot
    this.setState({ isHot: !isHot })
  }
}

